{% extends "projects/project_edit_base.html" %}

{% load i18n %}

{% block title %}{% trans "Edit Redirects" %}{% endblock %}

{% block project-redirects-active %}active{% endblock %}
{% block project_edit_content_header %}{% trans "Redirects" %}{% endblock %}

{% block extra_scripts %}
    <script type="text/javascript">

        var update_outcome = function(ev) {
            var field_from_url = $('#id_from_url');
                field_to_url =  $('#id_to_url');
                option = $('#id_redirect_type').val();
                redirect_from = "";
                redirect_target = "";

            if (option === "prefix") {
                redirect_from = field_from_url.val() + "faq.html";
                redirect_target = "/$lang/$version/faq.html";
            }
            else if (option === "page" ) {
                redirect_from = "/$lang/$version/" + field_from_url.val().replace(/^\/+/, '');
                redirect_target = "/$lang/$version/" + field_to_url.val().replace(/^\/+/, '');
            }
            else if (option === "exact" ) {
                redirect_from =  field_from_url.val();
                redirect_target =  field_to_url.val();
            }

            if (redirect_from && redirect_target) {
                var result = "Outcome: " + redirect_from + " -> " + redirect_target;
                $('#dynamic-redirect').text(result).show();
            } else {
                $('#dynamic-redirect').text("").hide();
            }
        };

        $(document).ready(function() {
            $('#id_from_url').parent().hide()
            $('#id_to_url').parent().hide()
            $('#dynamic-redirect').hide()

            $('#id_redirect_type').bind('change', function(ev) {
                $('#id_from_url').val('');
                $('#id_to_url').val('');
                $('#id_from_url').parent().hide()
                $('#id_to_url').parent().hide()

                if (this.value == 'prefix') {
                    $('#id_from_url').parent().show()
                    $('#id_to_url').parent().hide()
                }
                else if (this.value == 'page') {
                    $('#id_from_url').parent().show()
                    $('#id_to_url').parent().show()
                }
                else if (this.value == 'exact') {
                    $('#id_from_url').parent().show()
                    $('#id_to_url').parent().show()
                }
            update_outcome(ev);
          });
          $('#id_from_url, #id_to_url').keyup(update_outcome);
        });

    </script>
{% endblock %}

{% block project_edit_content %}
  <p class="help_text">
    {% trans "Add redirects for your project. This allows you to fix links to old pages that are 404ing." %}
  </p>

  {% if redirects|length > 0 %}
    <h3>{% trans "Redirects" %}</h3>
    <div class="module">
      <div class="module-list">
        <div class="module-list-wrapper">
          <ul>
            {% for redirect in redirects %}
              <li class="module-item">
                <div>
                  {{ redirect.get_redirect_type_display }}
                </div>
                {% if redirect.get_from_to_url_display %}
                  <div>
                    {{ redirect.get_from_to_url_display }}
                  </div>
                {% endif %}
                <ul class="module-item-menu">
                  <li>
                    <form method="post" action="{% url "projects_redirects_delete" project.slug %}">
                      {% csrf_token %}
                      <input type="hidden" name="id_pk" value="{{ redirect.pk }}" />
                      <input type="submit" value="{% trans "Remove" %}">
                    </form>
                  </li>
                </ul>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  {% endif %}

  <form method="post" action=".">{% csrf_token %}
    {{ form.as_p }}
    <div id="dynamic-redirect" class="empty"></div>
    <p>
      <input style="display: inline;" type="submit" value="{% trans "Add" %}">
    </p>
  </form>
{% endblock %}
